<template>
  <div class="container-item-editer-plus">
    <el-card shadow="never">
      <div class="item-card">
        <itemCover @change="getCover" />
        <el-input v-model="formData.title" class="item-title" maxlength="40" :show-word-limit="true" placeholder="请输入标题 (建议30字以内)" />
        <el-input v-model="formData.description" type="textarea" :rows="4" resize="none" placeholder="简介" />
        <itemEditer @change="getContent" />
        <el-button round plain type="primary" @click="submit">提交文章</el-button> &nbsp;&nbsp;
        <el-button round plain type="success">存草稿</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
// api
import { addProject } from '@/api/mivawork/project.js';
// item
import itemEditer from './simditor.vue';
import itemCover from './cover.vue';
// utils
import { ossPutUpload } from '@/utils/upload_handler';
export default {
  components: {
    itemEditer,
    itemCover
  },
  data() {
    return {
      formData: {
        title: '',
        cover: '',
        description: '',
        content: ''
      }
    };
  },
  methods: {
    async submit() {
      console.log(JSON.stringify(this.formData));
      await addProject(this.formData);
    },
    async uploadHandler(evt) {
      const [file] = evt.target.files;
      const res = await ossPutUpload({ file });
      this.formData.cover = res.url || res.res.requestUrls[0];
    },
    getCover(cover) {
      this.formData.cover = cover;
    },
    getContent(content) {
      this.formData.content = content;
    }
  }
};
</script>

<style lang="scss">
.container-item-editer-plus {
  width: 740px;
  margin: auto;
  img{
    max-width: 100%;
  }
  .item-card > * {
    margin: 10px 0;
  }
  .item-title {
    font-size: 20px;
    font-weight: bold;
    padding: 0px;
  }

}
</style>
